<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input
          v-model="searchForm.imei"
          clearable
          @clear="clearImei"
          placeholder="请输入设备编码"
          size="small"
          style="width: 220px; margin-right: 15px"
          maxlength="50"
          oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
        >
          <el-button
            slot="append"
            :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
            @click="searchClick"
          >
          </el-button>
        </el-input>

        <el-popover
          placement="bottom"
          width="460"
          trigger="click"
          popper-class="popover"
          size="small"
          v-model="showPopover"
        >
          <div>
            <el-form
              label-width="70px"
              style="margin: 20px 0"
              class="popover_from"
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item size="small" label="租户名称">
                    <el-select
                      v-model="searchForm.tenantId"
                      filterable
                      placeholder="租户名称"
                      size="small"
                      style="width: 360px; margin-left: 15px"
                      @visible-change="enterprise"
                      v-loadMore="loadMore"
                      clearable
                      remote
                      :remote-method="remoteMethodEnterprise"
                      @clear="onClear"
                    >
                      <el-option
                        v-for="(item, i) in enterpriseList"
                        :key="i"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                      <div
                        class="div_box"
                        v-loading="loading"
                        :style="loading ? '' : 'display: none;'"
                      ></div>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item size="small" label="设备状态">
                    <el-select
                      v-model="searchForm.online"
                      placeholder="在离线状态"
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      clearable
                    >
                      <el-option
                        v-for="item in onLineList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item size="small" label="告警状态">
                    <el-select
                      v-model="searchForm.isAlarm"
                      placeholder="告警状态"
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      @visible-change="enterprise"
                      clearable
                    >
                      <el-option
                        v-for="item in isAlarmList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item size="small" label="产品类型">
                    <el-select
                      v-model="searchForm.productId"
                      placeholder="产品类型"
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      @visible-change="enterpriseChange"
                      clearable
                      @change="ProductModelPage"
                    >
                      <el-option
                        v-for="item in productList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item size="small" label="产品型号">
                    <el-select
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      v-model="searchForm.classMark"
                      placeholder="产品型号"
                      clearable
                    >
                      <el-option
                        v-for="item in classMarkList"
                        :label="item.model"
                        :value="item.model"
                        :key="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item size="small" label="通信协议">
                    <el-select
                      v-model="searchForm.protocol"
                      placeholder="通信协议"
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      clearable
                    >
                      <el-option
                        v-for="item in protocolList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item size="small" label="拆除状态">
                    <el-select
                      v-model="searchForm.tamper"
                      placeholder="拆除状态"
                      size="small"
                      style="width: 130px; margin-left: 15px"
                      clearable
                    >
                      <el-option
                        v-for="item in tamperList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item size="small" label="电量值">
                <el-input
                  type="input"
                  maxlength="3"
                  v-model.trim="searchForm.minBattery"
                  style="width: 130px; margin-left: 15px; margin-right: 8.1%"
                  placeholder="最小值"
                  oninput=" { value=value.replace(/[^\d]/g, '') } { value=value.replace(/\-{2,}/g, '-') } { value=value.replace(/(\d)\-/g, '$1') }
                  { value=value.replace(/-(0+)/g, '0') } { value=value.replace(/^0+(\d)/, '$1') }
                    {if(value>100)value=100}"
                >
                </el-input>
                ——
                <el-input
                  type="input"
                  maxlength="3"
                  v-model.trim="searchForm.maxBattery"
                  style="width: 130px; margin-left: 8.1%"
                  placeholder="最大值"
                  oninput=" { value=value.replace(/[^\d]/g, '') } { value=value.replace(/\-{2,}/g, '-') } { value=value.replace(/(\d)\-/g, '$1') }
                  { value=value.replace(/-(0+)/g, '0') } { value=value.replace(/^0+(\d)/, '$1') }
                    {if(value>100)value=100}"
                >
                </el-input>
              </el-form-item>
              <!-- <el-form-item size="small" label="厂商">
                  <el-select v-model="searchForm.manufacturerId" placeholder="厂商" size="small" style="width: 100%"
                    @visible-change="getManufacturerListChange" filterable clearable>
                    <el-option v-for="item in manufacturerList" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item> -->
            </el-form>
            <div class="footer" style="text-align: right">
              <el-button size="small" @click="resetClick" class="cancel-button"
                >重 置</el-button
              >
              <el-button
                size="small"
                @click="searchClick1"
                class="confirm-button"
                >确 定</el-button
              >
            </div>
          </div>
          <el-button
            size="small"
            slot="reference"
            :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'"
          >
            高级搜索<i
              class="el-icon-search"
              style="margin-left: 5px; font-size: 12px"
            ></i
          ></el-button>
        </el-popover>
      </div>
      <div class="header_right">
        <el-button
          size="small"
          class="el_button"
          icon="el-icon-plus"
          @click="addClick"
          v-permission="{ action: 'terminal:add' }"
          >新增</el-button
        >
        <el-button
          size="small"
          class="el_button"
          @click="importClick"
          icon="el-icon-download"
          v-permission="{ action: 'terminal:import' }"
          >导入</el-button
        >
        <el-button
          class="el_button"
          size="small"
          icon="el-icon-upload2"
          @click="onExports"
          v-permission="{ action: 'terminal:export' }"
        >
          导出
        </el-button>

        <!-- <el-button class="el_button" size="small" icon="el-icon-delete" style="margin-left: 15px"
            @click="batchDelClick">
            批量删除
          </el-button> -->

        <el-dropdown @command="onDropdown">
          <el-button class="el_button" size="small" style="margin-left: 15px">
            批量操作<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="del">批量删除</el-dropdown-item>
            <!-- :disabled="flagIssued" -->
            <el-dropdown-item command="Issued">批量下发</el-dropdown-item>
            <el-dropdown-item command="alarm" :disabled="flagalarm"
              >告警模式</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="dataList"
        height="calc(100% - 65px)"
        class="table"
        ref="refTable"
        row-key="id"
        :header-cell-style="headerStyle"
        @selection-change="batchSelect"
        v-loading="loadingTable"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(47, 51, 73, 0.3)"
      >
        <el-table-column
          align="center"
          type="selection"
          :reserve-selection="true"
          width="50"
        ></el-table-column>
        <el-table-column align="center" label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column
          align="center"
          prop="imei"
          label="设备编码"
          min-width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceId"
          label="设备ID"
          min-width="270"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="deviceType"
          label="产品类型"
          min-width="140"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span>{{ row.productName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="classMark"
          label="产品型号"
          min-width="150"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="protocol"
          label="通信协议"
          min-width="150"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="row.protocol == 1">电信物模型标准规范</span>
            <span v-else-if="row.protocol == 2">移动铠湾规范</span>
            <span v-else-if="row.protocol == 3">移动安消规范</span>
            <span v-else-if="row.protocol == 4">萤石协议</span>
            <span v-else-if="row.protocol == 5">国标协议</span>
            <span v-else-if="row.protocol == 6">声光规范</span>
            <span v-else-if="row.protocol == 7">珠海慧芯</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="online"
          label="设备状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 'Camera'">-</span>
            <el-tag
              type="success"
              size="mini"
              v-else-if="scope.row.online === 1"
              >在线</el-tag
            >
            <el-tag type="danger" size="mini" v-else>离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="tamper"
          label="拆除状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <el-tag type="success" size="mini" v-if="scope.row.tamper === 0"
              >正常</el-tag
            >
            <el-tag
              type="danger"
              size="warning"
              v-else-if="scope.row.tamper === 1"
              >告警</el-tag
            >
            <span v-else>-</span>
            <!-- <el-tag type="info" size="mini" v-else>-</el-tag> -->
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="online"
          label="告警状态"
          min-width="80"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType == 'Camera'">-</span>
            <el-tag
              type="success"
              size="mini"
              v-else-if="scope.row.isAlarm === 0"
              >正常</el-tag
            >
            <el-tag type="danger" size="mini" v-else>告警</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="batteryValue"
          label="电量"
          show-overflow-tooltip
          min-width="80"
        >
          <template slot-scope="{ row }">
            <span
              v-if="
                row.batteryValue == '' ||
                row.batteryValue == null ||
                row.classMark == 'V380'
              "
              >-</span
            >
            <el-tag
              type="success"
              size="mini"
              v-else-if="row.batteryValue >= 30"
              >{{ row.batteryValue }}</el-tag
            >
            <el-tag type="danger" size="mini" v-else>{{
              row.batteryValue
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="signalValue"
          label="信号"
          show-overflow-tooltip
          min-width="80"
        >
          <template slot-scope="{ row }">
            <el-tag type="success" size="mini" v-if="row.signalValue == 0"
              >优</el-tag
            >
            <el-tag type="warning" size="mini" v-else-if="row.signalValue == 1"
              >良</el-tag
            >
            <el-tag type="danger" size="mini" v-else-if="row.signalValue == 2"
              >差</el-tag
            >
            <span v-else-if="row.signalValue == '' || row.signalValue == null"
              >-</span
            >
            <el-tag type="danger" size="mini" v-else>差</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="softwareVersion"
          label="软件版本"
          min-width="100"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span
              v-if="row.softwareVersion == '' || row.softwareVersion == null"
              >-</span
            >
            <span v-else>{{ row.softwareVersion }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="hardVersion"
          label="硬件版本"
          show-overflow-tooltip
          min-width="100"
        >
          <template slot-scope="{ row }">
            <span v-if="row.hardVersion == '' || row.hardVersion == null"
              >-</span
            >
            <span v-else>{{ row.hardVersion }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="iccid"
          label="设备卡号"
          show-overflow-tooltip
          min-width="180"
        >
          <template slot-scope="{ row }">
            <span v-if="row.iccid == '' || row.iccid == null">-</span>
            <span v-else>{{ row.iccid }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="tenantName"
          label="租户名称"
          show-overflow-tooltip
          min-width="120"
        >
        </el-table-column>
        <!-- <el-table-column align="center" prop="manufacturerName" label="厂商" show-overflow-tooltip>
          </el-table-column> -->
        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip
          min-width="160"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="management"
          label="操作"
          width="220"
          fixed="right"
        >
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="下发指令"
              placement="bottom"
              v-permission="{ action: 'terminal:command' }"
              v-if="
                row.deviceType !== 'UserTransferDevice' &&
                row.deviceType !== 'FireAlarmController'
              "
            >
              <i
                @click="instructionsClick(row)"
                class="el-icon-position tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="编辑"
              placement="bottom"
              v-permission="{ action: 'terminal:edit' }"
              v-if="row.deviceType === 'DoorMagnetism'"
            >
              <i
                @click="editClick(row)"
                class="iconfont tianxie tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="详情"
              placement="bottom"
              v-permission="{ action: 'terminal:details' }"
            >
              <i
                @click="detailsClick(row)"
                class="iconfont xiangqing tableBtnIcon"
              ></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="bottom"
              v-permission="{ action: 'terminal:delete' }"
            >
              <i
                @click="delClick(row)"
                class="iconfont shanchu tableBtnIcon"
              ></i>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page.sync="page"
        :limit.sync="limit"
        :total="total"
        @pagination="getDataList"
        class="pagination"
      >
      </pagination>
    </div>
    <device-add ref="refAdd"></device-add>
    <import-device ref="refImportDevice"></import-device>
    <InstructionList
      ref="refInstructionList"
      :deviceInfo="deviceInfo"
    ></InstructionList>
    <commandService
      ref="refcommandService"
      :idList="idList"
      :deviceInfo="deviceInfo"
      :CommandInfo="CommandInfo"
    >
    </commandService>
    <editDevice
      ref="refeditDevice"
      :deviceInfo="deviceInfo"
      :idList="idList"
    ></editDevice>
    <particulars ref="refparticulars" :deviceInfo="deviceInfo"></particulars>
  </div>
</template>

<script>
import {
  reqTerminalList,
  reqProductList,
  reqTerminalBatchDel,
  reqManufacturerList,
  reqDeviceRemove,
  reqDeviceRemoveByFather,
  reqCommandServicePage,
} from "@api/api.js";
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import DeviceAdd from "./components/DeviceAdd.vue";
// import batchDel from "@views/mixins/batchDel.js";
import ImportDevice from "./components/ImportDevice.vue"; //导入组件
import InstructionList from "./components/InstructionList.vue";
import commandService from "./components/commandService.vue";
import editDevice from "./components/editDevice.vue";
import particulars from "@components/DeviceInfo/particulars.vue"; //设备详情组件
import { mapState } from "vuex";
import advanceSearchMixin from "./mixins/advanceSearch.js"; //高级搜索
import loadMore from "@mixin/loadMore";

export default {
  name: "terminal",
  components: {
    Pagination,
    ImportDevice,
    DeviceAdd,
    InstructionList,
    commandService,
    editDevice,
    particulars,
  },
  mixins: [tableStyleMixin, advanceSearchMixin, loadMore],
  data() {
    return {
      showPopover: false, //v-model默认值是false, click激活变成true
      deviceInfo: {}, //设备一条信息
      page: 1,
      limit: 10,
      total: 0,
      dataList: [],
      loadingTable: false,
      searchForm: {
        online: "",
        productId: "",
        imei: "",
        minBattery: "",
        maxBattery: "",
        isAlarm: "",
        protocol: "",
        classMark: "",
        tamper: "",
        tenantId:"",
      },
      classMark2: "",
      protocol2: "",
      loadingSearch: false,
      onLineList: [
        {
          value: 1,
          label: "在线",
        },
        {
          value: 0,
          label: "离线",
        },
      ],
      isAlarmList: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: 1,
          label: "告警",
        },
      ],
      tamperList: [
        {
          value: "0",
          label: "正常",
        },
        {
          value: 1,
          label: "告警",
        },
      ],
      productList: [],
      batchDataList: [], //批量操作勾选的数据
      manufacturerList: [],
      flagIssued: true,
      flagalarm: true,
      idList: [],
      CommandInfo: [],
      hasSearch: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 下拉请求列表
    enterpriseChange(val) {
      if (val) {
        this.getProductList();
      }
    },
    // 下拉请求列表
    getManufacturerListChange(val) {
      if (val) {
        this.getManufacturerList();
      }
    },
    // 获取厂商列表
    async getManufacturerList() {
      const res = await reqManufacturerList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.manufacturerList = res.data.rows;
    },
    // 获取设备列表
    async getDataList() {
      let {
        imei,
        online,
        productId,
        minBattery,
        maxBattery,
        isAlarm,
        tenantId,
        protocol,
        classMark,
        tamper,
      } = this.searchForm;
      this.loadingTable = true;
      const res = await reqTerminalList(this.page, this.limit, {
        imei,
        online,
        productId,
        minBattery,
        maxBattery,
        isAlarm,
        tenantId,
        protocol,
        classMark,
        tamper,
      });
      this.loadingTable = false;
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.hasSearch =
        online ||
        productId ||
        minBattery ||
        maxBattery ||
        isAlarm ||
        tenantId ||
        protocol ||
        classMark ||
        tamper
          ? true
          : false;
      this.dataList = res.data.rows;
      this.total = res.data.total;
      this.exportList = {
        online,
        productId,
        imei,
        minBattery,
        maxBattery,
        tenantId,
        tamper,
        isAlarm,
        classMark,
        protocol,
      };
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
      this.clearSelections(); //清除勾选的设备
    },
    // 选择在离线状态
    changeOnline() {
      this.getInitDataList();
    },
    // 选择产品类型
    changeProductId(val) {
      this.flagIssued = true;
      // this.productList.forEach(item=>{
      //   if(item.deviceType=='Infrared' && item.id==val){
      //     this.flagIssued=false;
      //     return;
      //   }
      // })
      this.getInitDataList();
    },
    changemanufacturerId() {
      this.getInitDataList();
    },
    // 查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
      this.clearSelections();
    },
    //   获取产品列表
    async getProductList() {
      const res = await reqProductList();
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.productList = res.data.rows;
    },
    // 清除请求
    clearOnline() {
      this.getInitDataList();
    },
    clearProductId() {
      this.getInitDataList();
    },
    clearImei() {
      this.getInitDataList();
    },
    // 新增
    addClick() {
      this.$refs.refAdd.dialogVisible = true;
      this.$refs.refAdd.getProductList();
      this.$refs.refAdd.getManufacturerList();
    },
    // 编辑
    editClick(row) {
      this.idList = [];
      // console.log(row);
      this.deviceInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refeditDevice.dialogVisible = true;
    },
    detailsClick(row) {
      // console.log(row)
      // if (row.deviceMac == "" && row.deviceType == "Camera" && row.classMark != 'V380')
      //   return this.$modal.notifyWarning("设备MAC地址为空");

      if (
        row.deviceType === "UserTransferDevice" ||
        row.deviceType === "FireAlarmController"
      ) {
        this.$store.commit("saveDeviceInfo", row); //保存信息，使页面刷新信息还存在
        this.$router.push("/device/host");
      } else {
        this.$refs.refparticulars.dialogVisible = true;
        this.deviceInfo = JSON.parse(JSON.stringify(row));
        this.deviceInfo.info = "11"; //标识运维管理员不用传安装点id
      }
    },
    // 指令下发
    instructionsClick(row) {
      // console.log(row);
      this.deviceInfo = JSON.parse(JSON.stringify(row));
      this.$refs.refInstructionList.dialogVisible = true;
    },
    // 删除
    async delClick(row) {
      const result = await this.$confirm(
        "此操作将永久删除该设备, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      if (row.classMark === "LK-SGBJ-01" || row.classMark === "LK-LXBJ-01") {
        // 电气设备（需下发指令）
        const res = await reqDeviceRemoveByFather(row.id);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      } else {
        // 其他设备
        const res = await reqDeviceRemove(row.id);
        if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      }
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
    },
    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      // console.log(arr);
      let type = "";
      arr.forEach((item, index) => {
        // console.log(item,index);
        if (index == 0) {
          type = item.deviceType; //判断是不是同一种类型
        }
        //先判断是不是同一种类型
        if (item.deviceType != type) {
          // console.log(111);
          this.flagIssued = true;
          return;
        } else {
          if (
            item.deviceType == "Infrared" ||
            item.deviceType == "SmokeAlarm"
          ) {
            // console.log(222);
            this.flagIssued = false;
          } else {
            this.flagIssued = true;
          }
          if (item.deviceType == "DoorMagnetism") {
            this.flagalarm = false;
          } else {
            this.flagalarm = true;
          }
        }
      });
      this.batchDataList = arr;
    },
    // 更多操作回调事件
    async onDropdown(e) {
      // if (this.batchDataList.length <= 0) {
      //   this.$modal.notifyWarning("请勾选要操作的建筑物");
      //   return;
      // }
      let idList = [];
      switch (e) {
        case "del":
          if (this.batchDataList.length <= 0)
            return this.$modal.notifyWarning("请先勾选需要删除的设备");
          const result = await this.$confirm(
            "此操作将永久删除勾选的设备, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).catch(() => {});
          if (result !== "confirm") return;
          let arrId = this.batchDataList.map((item) => {
            return item.id;
          });
          this.reqDelFun(arrId);
          break;
        case "Issued":
          if (this.classMark2 == "" || this.protocol2 == "")
            return this.$modal.notifyWarning("请先筛选产品型号、通信协议");
          if (this.batchDataList.length <= 0)
            return this.$modal.notifyWarning("请先勾选需要下发指令的设备");
          idList = this.batchDataList.map((item) => {
            return item.id;
          });
          if (
            this.searchForm.classMark == "LK-SGBJ-01" ||
            this.searchForm.classMark == "LK-LXBJ-01"
          )
            return this.$modal.notifyWarning("联控设备暂不支持批量下发");
          // console.log(idList);
          this.deviceInfo = JSON.parse(JSON.stringify(this.batchDataList[0]));
          this.idList = JSON.parse(JSON.stringify(idList));

          // 查询指令服务
          const res = await reqCommandServicePage(1, 50, {
            productModel: this.deviceInfo.classMark,
            protocol: this.deviceInfo.protocol,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          // console.log(res);
          if (res.data.total == 0)
            return this.$modal.notifyWarning("没有可下发的指令");
          this.CommandInfo = JSON.parse(JSON.stringify(res.data.rows));

          this.$refs.refcommandService.dialogVisible = true;
          break;
        case "alarm":
          // if (this.batchDataList.length <= 0)
          //   return this.$modal.notifyWarning("请先勾选需要下发指令的设备");
          idList = this.batchDataList.map((item) => {
            return item.id;
          });
          // console.log(idList);
          // this.deviceInfo = JSON.parse(JSON.stringify(this.batchDataList[0]));
          this.idList = JSON.parse(JSON.stringify(idList));
          this.$refs.refeditDevice.dialogVisible = true;
          break;
      }
    },
    // 批量删除
    // async batchDelClick() {
    //   let { batchDataList } = this;
    //   if (batchDataList.length <= 0)
    //     return this.$modal.notifyWarning("请先勾选需要删除的设备");
    //   const result = await this.$confirm(
    //     "此操作将永久删除勾选的设备, 是否继续?",
    //     "提示",
    //     {
    //       confirmButtonText: "确定",
    //       cancelButtonText: "取消",
    //       type: "warning",
    //     }
    //   ).catch(() => { });
    //   if (result !== "confirm") return;
    //   let arrId = batchDataList.map((item) => {
    //     return item.id;
    //   });
    //   this.reqDelFun(arrId);
    // },
    // 清空复选框√√
    clearSelections() {
      this.flagalarm = true;
      this.flagIssued = true;
      this.$refs.refTable.clearSelection();
    },
    // 请求删除
    async reqDelFun(idList) {
      const res = await reqTerminalBatchDel({
        idList,
        userId: this.user.userId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
    },
    // 导入
    importClick() {
      this.$refs.refImportDevice.getProductList();
      this.$refs.refImportDevice.getManufacturerList();
      this.$refs.refImportDevice.dialogVisible = true;
    },
  },
  created() {},
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

::v-deep .el_button.el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .popover_from .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

::v-deep .el-button--small {
  border: none;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 9999;
}

/* 定义滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  display: block; //显示滚动条
  width: 0px; //定义滚动条宽度
  height: 10px; //定义滚动条高度
  border-radius: 10px; //定义滚动条圆角
}

/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义轨道阴影
  border-radius: 10px; //定义轨道圆角
  background-color: transparent; //定义轨道颜色
}

/*定义滑块 内阴影+圆角*/
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 10px; //定义滑块圆角
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5); //定义滑块阴影
  background-color: @primaryBgcolor12; //定义滑块颜色
}

// 解决el-table固定列滚动错位问题
::v-deep
  .el-table
  .el-table__fixed-right
  .el-table__fixed-body-wrapper
  .el-table__body {
  padding-bottom: 10px !important;
}

// 解决el-table固定列挡住滚动条问题
::v-deep .el-table__fixed-right {
  height: auto !important;
  bottom: 10px !important; // 这个得自己调试看多少合适
}

// 去掉固定列下方的横线， 样式优化
::v-deep .el-table__fixed-right::before {
  display: none !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题  ,鼠标滑过td上作用的样式
::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__body .el-table__row.hover-row td {
  background-color: transparent !important;
}

//右边固定
// 解决element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
::v-deep .el-table__fixed-right tbody tr:hover > td {
  background-color: transparent !important;
}
</style>
